<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    

		<link rel="stylesheet" type="text/css" href="/wechat/jquery.calendar.css"/>
		<script src="/wechat/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/wechat/jquery.calendar.js" type="text/javascript" charset="utf-8"></script>
    
    <style>
    	.row {
    		display:flex;
    		flex-direction:row;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.row-ai-c {
    		align-items:center;
    	}
    	.row-jc-sb {
    		justify-content: space-between;
    	}
    	.row-jc-sa {
    		justify-content: space-around;
    	}
    	
    	
    	.column {
    	    display:flex;
    		flex-direction:column;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.column-ai-c {
    		align-items:center;
    	}
    	
    	/* ------------------------- */
    	.col-aw-sb-ct-0 {
    		width:auto;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.col-fw-sa-fs-1 {
    		width:100%;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-around;
    		align-items: flex-start;
    		flex-grow: 1;
    	}
    	.row-fw-sb-ct-0 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.row-fw-sb-ct-1 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 1;
    	}
    	
    	/* ------------------------------- */
    	.icon {
    		background-repeat: no-repeat;
    		background-position: center;
    		background-size: cover;
    	}
    	.i-sm {
    		width: calc(14.58px * 0.5);
    		height: calc(26.7px * 0.5);
    	}
    	.i-md {
    		width: calc(24px * 1);
    		height: calc(24px * 1);
    	}
    	.i-arrow-right {
    		background-image: url("/icon/arrow_right.png");
    	}
    	.i-iconography_caesarzkn {
    		background-image: url("/icon/icon2.png");
    	}
    </style>
    <style>
    	* {
    		padding: 0px;
    		margin: 0px;
    	}
    	html, body, #app {
    		padding: 0px;
    		margin: 0px;
    		height: 100%;
    	}
    	
    	#app {
    		display:flex;
    		flex-direction:column;
    	}
    	
    	.title-bar {
    		text-align:center;
    		background-color:#66CE57;
    		height:50px;
    		line-height:50px;
    		width:100%;
    		color:white;
    	}
    	
    	.content-area {
    		display:flex;
    		flex-direction:column;
    		align-items:center;
    		flex-grow:1;
    	}
    	.project-sel {
    		background-color:#E9E9E9;
    		width:100%;
    		height:60px;
    		padding-top:10px;
    		padding-bottom:10px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    	.sel-item {
    		background-color:red;
    	}
    	
    	.selector {
    		background:none;
    		background-color:transparent;
    		flex-grow:1;
    		margin-left:10px;
    		margin-right:10px;
    	}
    	
    	.el-date-editor {
    		width: 100% !important;
    	}
    	.el-date-editor .el-input__inner {
		    padding-left: 12px !important;
		}
		.el-date-editor .el-input__prefix {
			display:none;
		}
    	
    	.el-input__inner {
    		border:none !important;
    		background-color:transparent; 
    		background:none;
    		padding-left: 0px;
    		padding-right: 0px !important;
    	}
    	.el-input__suffix{
    		display:none;
    	}
    </style>
    
    <style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
</head>

<body>
    <div id="app">
	  <div class="title-bar">
	  	打卡记录
	  </div>
	  <div id="content-area" class="content-area">
	  </div>
	</div>
    
    <script th:inline="javascript">
	// 为给定 ID 的 user 创建请求

	//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
		Date.prototype.format = function (fmt) {
	    var o = {
	        "M+": this.getMonth() + 1, //月份
	        "d+": this.getDate(), //日
	        "h+": this.getHours(), //小时
	        "m+": this.getMinutes(), //分
	        "s+": this.getSeconds(), //秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	        "S": this.getMilliseconds() //毫秒
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
	}
		
    var user = [[${LOGINNAME}]];
    var personId = [[${USERID}]];
    
    var testData = [
		{"date": "2018/4/6", "name": "上班：09:00"},
		{"date": "2018/4/6", "name": "下班：-- : --"},
		{"date": "2018/4/24", "name": "测试事件2"},
		{"date": "2018/5/24", "name": "测试事件3"}
	]
	$('#content-area').calendar({
		defaultDate: new Date().format("yyyy/MM/dd"),
		headerHeight:'120px',
		dialogMethod:'all',
		//eventData: testData, // 设置eventData会覆盖url地址
		url:'/system/clock/select3',  // 可直接通过url请求后端地址
		method:'get',
		params:{personId: window.personId}
	});
    </script>
</body>
</html>